<template>
  <div class="header">
    <a-row>
      <a-col :span="12">
        <h1 class="title">关山建设集团 丨 智能用电管控系统—用户管理端</h1>
      </a-col>
      <a-col :span="8"></a-col>

      <div class="icons">
        <i class="iconfont icon-gonggao"  />
        <i class="iconfont icon-bianzubeifen3" />
        <a-dropdown class="dropdown">
          <a class="dropdown1" @click="e => e.preventDefault()">
            {{user.realName}}
            <a-icon type="down" />
          </a>
          <a-menu slot="overlay">
            <a-menu-item>
              <a href="javascript:;" @click="loginOut">
                <span>退出账号</span></a>
            </a-menu-item>
          </a-menu>
        </a-dropdown>
      </div>
    </a-row>
  </div>
</template>

<script>
import iconfont from "../assets/iconfont/iconfont.css";
import { login } from "../views/user/login";
export default {
  data() {
    return {
      user: []
    };
  },
  mounted: function() {
    this.getUserInfo();
  },
  methods: {
    loginOut() {
      window.sessionStorage.clear();
      this.$router.push("/user/login");
    },
    // 获取token用户数据
    getUserInfo() {
      this.user = JSON.parse(sessionStorage.getItem("this.data"));
    }
  }
};
</script>

<style scoped>
.header {
  position: relative;
  z-index: 9;
  height: 98px;
  background-color: white;
  margin-bottom: 100px;
  box-shadow: 0px 5px 1px 1px rgba(19, 18, 18, 0.1);
}
.header .title {
  position: relative;
  left: 15px;
  font-size: 35px;
  font-weight: 400;
  line-height: 60px;
  color: rgba(4, 133, 166, 1);
  line-height: 90px;

}
.icons {
  float: right;
  position: absolute;
  top: 50%;
  right: 29px;
  transform: translate(0, -50%);
  font-size: 18px;
}
.icon-bianzubeifen3 {
  color:rgba(14,126,250,1);
  margin-right: 62px;
  margin-left: 3px;
}
.icon-gonggao{
  color:rgba(14,126,250,1);
}
.icons .dropdown1 {
  color: black;
}
.dropdown1 {
  font-size: 18px;
  margin-right: 30px;
}
</style>